<!DOCTYPE html>
<html>
<head>
<title>EasyBox example page</title>
<script type="text/javascript" src="easybox/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="easybox/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="easybox/distrib.min.js"></script>
<link rel="stylesheet" href="easybox/styles/modern/easybox.min.css" type="text/css" media="screen" />
<style type="text/css">
body { background-color: #fff; font-family: arial, helvetica, sans-serif; font-size: 12pt; color: #002; }
hr { visibility: hidden; clear: both; }
a { font-weight: bold; color: #224; text-decoration: none; }
#wrapper { margin: 0 auto; padding: 16px; max-width: 520px; }
ul#gallery { padding: 0; margin: 0; list-style: none; }
ul#gallery li { display: block; float: left; margin: 0 4px 4px 0; }
ul#gallery li img { display: block; padding: 0; margin: 0; }
</style>
<script type="application/json" id="easyOptions">
{"gallery1":{"slideshow": 5000, "autoClose": 5000},"lightbox-vimeo1": {"loopVideos": true},"lightbox-gallery2": {"slideshow": 5000, "autoClose": 5000},"lightbox-vimeo2": {"loopVideos": true},"lightbox-slide": {"slideshow": 10000}}
</script>
</head>
<body>
<div id="wrapper">
<h1>Easybox example page</h1>
<p>EasyBox is a lightbox clone based on the light-weight Slimbox2 script. It offers a variety of additional features such as:</p>
<p><ul><li>displaying YouTube and Vimeo videos,</li>
<li>displaying inline content,</li>
<li>displaying iFrames and</li>
<li>better animations</li>
<li>Theme support</li></ul></p>
<h2>Examples</h2>
<h3>Images</h3>
<p><ul id="gallery">
<li><a href="img/example1.jpg" title="Image 1" class="lightbox" data-group="gallery1"><img src="img/example1thmb.jpg" /></a></li>
<li><a href="img/example2.gif" title="Image 2" class="lightbox" data-group="gallery1"><img src="img/example2thmb.jpg" /></a></li>
<li><a href="img/example3.png" title="Image 3" class="lightbox" data-group="gallery1"><img src="img/example3thmb.jpg" /></a></li>
<li><a href="img/example4.jpg" title="Image 4" class="lightbox" data-group="gallery1"><img src="img/example4thmb.jpg" /></a></li>
</ul></p>
<hr />
<h3>Various elements</h3>
<p><a href="http://www.youtube.com/watch?v=XJFmh6W1Jjo" class="lightbox" title="Example YouTube video">Click here</a> to view a YouTube video inside EasyBox.</p>
<p><a href="http://vimeo.com/27359051" class="lightbox" title="Example Vimeo video">Click here</a> to view a Vimeo video inside EasyBox.</p>
<p><a href="http://www.example.com" class="lightbox" title="Example iFrame">Click here</a> to view an iFrame inside EasyBox.</p>
</div>
</body>
</html>
